<template>
  <a-image :width="width" :src="getFileIcon(fileType)" :preview="false" />
</template>
<script setup lang="ts">
import { withDefaults } from 'vue'
withDefaults(
  defineProps<{
    width?: number
    fileType: string
  }>(),
  {
    width: 20
  }
)

const docx = new URL('./img/DOCX.png', import.meta.url).href
const pdf = new URL('./img/PDF.png', import.meta.url).href
const xlsx = new URL('./img/XLSX.png', import.meta.url).href
const ppt = new URL('./img/PPT.png', import.meta.url).href
const img = new URL('./img/IMG.png', import.meta.url).href
const other = new URL('./img/OTHER.png', import.meta.url).href
const zip = new URL('./img/ZIP.png', import.meta.url).href
const txt = new URL('./img/TXT.png', import.meta.url).href

const getFileIcon = (fileType: string) => {
  let icon
  const type = fileType?.toUpperCase()
  switch (type) {
    case 'PDF':
      icon = pdf
      break
    case 'DOCX':
    case 'DOC':
      icon = docx
      break
    case 'XLSX':
    case 'XLS':
      icon = xlsx
      break
    case 'PPT':
    case 'PPTX':
      icon = ppt
      break
    case 'JPG':
    case 'JPEG':
    case 'PNG':
    case 'GIF':
    case 'BMP':
    case 'TIF':
    case 'WEBP':
      icon = img
      break
    case 'ZIP':
    case 'RAR':
    case '7Z':
      icon = zip
      break
    case 'TXT':
      icon = txt
      break
    default:
      icon = other
      break
  }
  return icon
}
</script>
